:root {
  --custom-row-data: #ffffff1a;
  --custom-sever-info: #fff9;
  --text-color: #fff;
  --custom-sensor-info: #ffffffb3;
  --custom-schedule-box: #ffffff4d;
  --custom-schedule-inner: #ffffffb3;
  --custom-collapse-content: #ffffff3d;
  --custom-active-color: #4daede;
}
#app {
  background: url('@/assets/images/layout/theme-bg.png') no-repeat center center;
  background-size: 100% 100%;
}
.menu-header {
  position: relative;
  background: url(@/assets/images/layout/header-bg.png) no-repeat !important;
  background-size: cover !important;
  background-position: 0 !important;
  height: 80px !important;
  line-height: 55px !important;
  &.hide-before {
    &::before {
      background: transparent;
    }
  }

  .ant-menu-item {
    padding: 0 25px;
    display: inline-block;
    height: 100%;
    background: linear-gradient(to bottom, #ffffff 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;

    &::before {
      content: ' ';
      position: absolute;
      right: 0;
      top: 35%;
      width: 1px;
      height: 30%;
      background: #000;
    }

    &:nth-last-of-type(2) {
      &::before {
        width: 0;
      }
    }
  }

  .ant-menu-item-selected {
    background: linear-gradient(to bottom, #ffffff 0%, #4fe5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.main-content {
  // background-color: #0000005c;
  //   padding:  0 20px;
  position: relative;
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: -10px;
    width: 146px;
    height: 100%;
    background: url(@/assets/images/layout/men-left-bg.png) no-repeat;
    background-size: contain;
    z-index: 20;
    pointer-events: none;
  }
}
.ant-table-wrapper .ant-table-thead > tr,
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead > tr > td {
  background-color: #0000004c;
}
.tab-views {
  & > .ant-tabs-nav::before {
    border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  }
  .custom-tab-bar-style {
    background-color: transparent;
    color: #ffffff66;
    border: 1px solid rgba(255, 255, 255, 0.36);
  }
  .ant-tabs-tab-active .custom-tab-bar-style {
    background-color: transparent;
    border-bottom-color: #3a626c;
    color: #ffffff;
  }
}

.ant-table-wrapper {
  tr.ant-table-row > td {
    background: #00000033;
  }
  tr.ant-table-row-selected > td {
    background: #0000006e !important;
  }
  tr.ant-table-row:hover > td,
  tr.ant-table-row-selected:hover > td,
  td.ant-table-cell-row-hover {
    background: #0000005c !important; // table hover bg
  }
  .ant-table-ping-left {
    tr.ant-table-row:hover > td,
    tr.ant-table-row-selected:hover > td,
    td.ant-table-cell-row-hover {
      &.ant-table-cell-fix-left {
        background-color: #30292c !important;
      }
    }
    & .ant-table-cell-fix-left {
      background: #30292c !important;
    }
  }
  .ant-table-ping-right {
    tr.ant-table-row:hover > td,
    tr.ant-table-row-selected:hover > td,
    td.ant-table-cell-row-hover {
      &.ant-table-cell-fix-right {
        background-color: #0b1b25 !important;
      }
    }
    & .ant-table-cell-fix-right {
      background: #0b1b25 !important;
    }
  }
}
.ant-btn-default:disabled {
  border-color: #ffffff7a;
}
.ant-select-dropdown .ant-select-item-option-active {
  background-color: #6798b0 !important;
}
// modal弹窗样式
.ant-modal .ant-modal-content {
  background: url('@/assets/images/modal-bg.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  box-shadow: 0 0 20px 5px rgba(0, 21, 41, 0.35);
  border-radius: 10px;
}
.ant-modal .ant-modal-header {
  background-color: transparent;
}

.ant-modal-footer {
  .ant-btn:not(.ant-btn-background-ghost) {
    border: 0 !important;
    &:hover {
      border: 0 !important;
    }
  }
  .ant-btn-default:not(.ant-btn-background-ghost) {
    background-color: #576e90 !important;
    &:hover {
      background-color: #57739b !important;
    }
  }
  .ant-btn-primary:not(.ant-btn-background-ghost) {
    &:hover {
      color: #badeff !important;
    }
  }
}

$color-black: rgba(0, 0, 0, 0.18);
.pro-form-modal {
  .ant-form-item .ant-form-item-label {
    text-align: left;
  }
  .ant-input-affix-wrapper,
  .ant-input-number,
  .ant-select-selector {
    box-shadow: none !important;
  }
  .ant-form-item:has(
      .ant-input-disabled,
      .ant-input-number-disabled,
      .ant-input-affix-wrapper-disabled,
      .ant-select.ant-select-disabled,
      .ant-select-multiple.ant-select.ant-select-disabled,
      .ant-radio-wrapper-disabled
    ) {
    .ant-form-item-label > label.ant-form-item-required::before {
      color: transparent;
    }
    .ant-input-textarea-show-count::after {
      display: none;
    }
    input::placeholder,
    textarea::placeholder {
      color: transparent;
    }
  }
  .ant-select.ant-select-disabled,
  .ant-select-multiple.ant-select.ant-select-disabled {
    .ant-select-selector
    /*,.ant-select-selection-item*/ {
      background-color: $color-black;
      color: currentColor;
    }
    .ant-select-arrow {
      display: none;
    }
    .ant-select-selection-placeholder {
      color: transparent;
    }
  }
  .ant-input-disabled {
    color: currentColor;
    background-color: $color-black;
    resize: none;
  }
  .ant-input-number-disabled {
    background-color: $color-black;
  }
  .ant-input-affix-wrapper {
    + .ant-input-group-addon {
      background-color: #0000003d;
    }
    &:has(.ant-input-disabled) {
      background-color: $color-black;
      color: currentColor;
      + .ant-input-group-addon {
        background: $color-black;
      }
    }
  }
}

.modal-tab-bg .ant-modal-content {
  background: url('@/assets/images/tab-rigt-bg.png') no-repeat 169px top;
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0px;
    width: 169px;
    height: 100%;
    background: url(@/assets/images/tab-left-bg.png) no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
    border-bottom-left-radius: 10px;
  }
  .tab-collapse {
    .ant-collapse-item {
      width: 145px;
    }
    .ant-btn {
      z-index: 1;
      text-align: left;
      &:hover {
        background: transparent;
      }
    }
    .ant-space-item:has(.active) {
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        top: -13px;
        left: -40px;
        width: 169px;
        height: 58px;
        background: url(@/assets/images/tab-select-bg.png) no-repeat;
        background-size: cover;
        pointer-events: none;
      }
    }
    .ant-collapse-header {
      padding-left: 0;
      padding-bottom: 0;
    }
    .ant-collapse-header-text {
      white-space: nowrap;
    }
  }
}

.ant-descriptions.ant-descriptions-bordered .ant-descriptions-row {
  border-bottom: 1px solid #f2f2f233;
}

.ant-select-multiple .ant-select-selection-item {
  background-color: var(--alertLevel, #4daede) !important;
}

.monitor-server {
  .ant-card {
    border-radius: 12px;
  }
  .ant-descriptions-view {
    background-color: rgba(0, 0, 0, 0.24);
  }
}

.footer-buttons {
  .ant-btn-default {
    background-color: #576e90;
    border: 0;
  }
}
.ql {
  color: #63e3e3;
  border-color: #63e3e3;
}
.zl {
  color: #e0e0e0;
  border-color: #b5c0c3;
}
.fast-config {
  background: url('@/assets/images/config.png') no-repeat center;
  background-size: 100%;
  cursor: pointer;
  &:hover {
    background: url('@/assets/images/config_hover.png') no-repeat center;
    background-size: 190%;
  }
}

.ant-select-tree
  .ant-select-tree-list
  .ant-select-tree-checkbox.ant-select-tree-checkbox-checked
  .ant-select-tree-checkbox-inner {
  background: var(--custom-active-color);
}

.ant-tree .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background-color: var(--custom-active-color) !important;
  // border-color: #a3a3a3 !important;
}

.ant-tree .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
  background-color: var(--custom-active-color) !important;
  // border-color: #a3a3a3 !important;
}

.ant-tree-checkbox-checked:hover .ant-tree-checkbox-inner {
  // border-color: #6ad7ca !important;
  // background-color: #6ad7ca !important;
}
